<template>
  <div class="top-div">
    <div class="p-name-title">
      <span>
        <slot name="title">项目名称</slot>
      </span>
    </div>
    <div class="p-name-div">
      <div ref="p-name" class="p-name" :class="{ 'auto-height': projectFullName }">
        {{ c_content }}

        <!-- 用来判断行高是否超过两行 -->
        <div class="calc-height" ref="calc-height">{{ c_content }}</div>
      </div>
      <span v-if="projectFullNameBtn" @click="projectFullName = !projectFullName" class="open">{{ projectFullName ? "收起" : "展开" }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Search } from "vant";

@Component({
  name: "DetailTop",
  components: {
    VanSearch: Search
  }
})
export default class DetailTop extends Vue {
  @Prop({ default: "" }) content!: string;

  // 是否显示全部名称
  private projectFullName = false;
  // 是否显名称的展开收起按钮
  private projectFullNameBtn = false;

  // 判断是否需要显示展开收起按钮
  private calcHeight() {
    this.$nextTick(() => {
      if ((this.$refs["calc-height"] as any).offsetHeight > (this.$refs["p-name"] as any).offsetHeight) {
        this.projectFullNameBtn = true;
      }
    });
  }

  private get c_content() {
    const _return = this.content;
    this.calcHeight();
    return _return;
  }
}
</script>

<style lang="less" scoped>
.top-div {
  background: url("~@/assets/images/bg-5.png") #ffffff top right no-repeat;
  background-size: 60px;
  padding: 15px;

  .calc-height {
    position: absolute;
    visibility: hidden;
    white-space: normal;
  }

  .p-name-title {
    font-size: 17px;
    color: #333333;
    font-weight: 500;
    width: fit-content;
    position: relative;
    span {
      position: relative;
      z-index: 1;
    }

    &::after {
      content: "";
      left: 2px;
      right: 2px;
      bottom: 2px;
      content: "";
      height: 6px;
      opacity: 0.56;
      background: #69b9fc;
      position: absolute;
    }
  }

  .p-name-div {
    font-size: 13px;
    position: relative;
    margin-top: 14px;
    line-height: 150%;
  }

  .p-name {
    color: #596275;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    width: 90%;
    position: relative;
    &.auto-height {
      white-space: normal;
    }
  }
  .open {
    color: #5895eb;
    position: absolute;
    right: -12px;
    top: -12px;
    padding: 12px;
    line-height: 150%;
  }
}
</style>
